<script setup name="App" lang="ts">
// 需求：点击按钮调用子组件的方法
import { onMounted, ref } from 'vue';
import Child from './Child.vue'

// InstanceType<> Vue 内置的泛型工具
// typeof Child 获取 Child 构造函数的类型
// InstanceType<typeof Child> 获取 Child 这个构造函数实例的类型
const childCmp = ref<InstanceType<typeof Child> | null>(null)

const handleClick = () => {
  childCmp.value?.show()
  /* if(childCmp.value) {
    childCmp.value.show()
  } */
}

// 在写 TS 代码的时候，typeof 也可以用于获取类型
const o = {
  name: 'ifer',
  age: 18
}

// typeof 可以获取类型（和类型一起使用）
type TO = typeof o

// 下面写法用的是 JS 中的 typeof 进行的类型判断
// const t = typeof o
// console.log(t)
const temp = (obj: TO) => {
}
temp(o)

onMounted(() => {
  /* const oDiv = document.querySelector('div') as HTMLDivElement
  oDiv.style.backgroundColor = 'pink' */
  /* const oDiv = document.querySelector('div')!
  oDiv.style.backgroundColor = 'pink' */

  // ? 可选链不能用于赋值的情况
  // ! 获取和赋值都行
  document.querySelector('div')!.style.backgroundColor = 'pink'
})

</script>
<template>
  <div>
    <Child ref="childCmp" />
    <button @click="handleClick">调用子组件的方法</button>
  </div>
</template>
